<template>
  <!--精品课详情-->
<div class="boutiqueDetails">
  <div>
    <img class="boutiqueDetailsimg" :src="URL+details.bigimg" alt="">
    <div class="boutiqueDetails_top">
      <div><h5>{{details.bookCount}} <p>包含书籍</p></h5></div>
      <div><h5>{{details.totalDuration}}<p>包含书籍</p></h5></div>
      <div><h5>{{details.clickCount}}<p>学习人数</p></h5></div>
    </div>
  </div>
  <div class="boutiqueDetails_content" v-html="details.content">

  </div>
  <comment></comment>
</div>
</template>

<script>
  import comment from "@/components/comment";
    export default {
        name: "boutiqueDetails",
      data(){
          return{
            details:[],
          }
      },
      components:{
        comment
      },
      mounted(){

        this.$('.boutiqueDetails_content').children('p').children('img').css({width:'100%'})
        this.$('.boutiqueDetails_content p img').css('width','100%')
        let  date = new Date().getTime() //获取当前时间戳
        var obj ={themeid :this.$route.params.id,channel:'weixin',timestamp:date,token :0}
        var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        var url = 'https://testapi.readerday.com/v3/product/theme/detail/0/'+sign +'/' + date +'/'+ this.$route.params.id + '/weixin'

        this.$axios.get(url)
          .then((res)=>{
            this.details=[]
            this.details=res.data.data
            console.log(this.details)
          })
        setTimeout(()=>{
          console.log(this.$('.boutiqueDetails_content').children().children('img').css('width','100%'))
        },800)

      },
      methods:{

      }
    }
</script>

<style scoped>
  .boutiqueDetails{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
.boutiqueDetails_top{
  display: flex;
  box-shadow: #666 0px 0px 10px;
  -webkit-box-shadow: #666 0px 0px 10px;
  margin-bottom: .1rem;
  padding: .1rem 0;
}
.boutiqueDetailsimg{
  width: 100%;
}
  .boutiqueDetails_top>div{
    flex: 1;
    height: .6rem;
    line-height: .6rem;
    -webkit-flex: 1;

  }
.boutiqueDetails_top>div:nth-child(2) h5{
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
}
.boutiqueDetails_top>div h5{
  height: .55rem;
  padding-top: .1rem;
}
.boutiqueDetails_content{

}
.boutiqueDetails_content p{

}
.boutiqueDetails_content img{
  width: 100%;

}
</style>
